<template>
  <Teleport to="body">
    <div v-if="isShowColor" class="global-color-palette-container">
      <ColorPalette class="global-control-color" />
    </div>
  </Teleport>
</template>

<script setup>
import { watch, onMounted } from 'vue';
import ColorPalette from './components/ColorPalette.vue';
import { useColorState } from '../../util/colorState.js';

const { isShowColor } = useColorState();

// 确保组件挂载时调色板被正确附加到body
onMounted(() => {
  console.log('全局调色板已挂载', isShowColor.value);
});

// 监听显示状态变化
watch(isShowColor, (newVal) => {
  console.log('调色板显示状态变化:', newVal);
});
</script>

<style scoped>
.global-color-palette-container {
  position: fixed;
  top: 50px;
  right: 20px;
  z-index: 999999;
  /* 超高z-index确保在所有内容之上 */
}

.global-control-color {
  /* 如有必要添加额外样式 */
}
</style> 